import React, { useContext } from 'react';
import { Alert, View } from 'react-native';
import { Button, Image, Text } from 'react-native-elements';
import Clipboard from '@react-native-community/clipboard';
import Toast from 'react-native-simple-toast';

import LocaleContext from '../libs/locale';
import WalletContext from '../libs/wallet';

const Export = ({ navigation, route, setWallet }: any) => {
  const locale: any = useContext(LocaleContext);
  const wallet: any = useContext(WalletContext);

  const generateKeystore = (): string => {
    const keystore = {
      version: 101,
      curIndex: 0,
      accounts: [{
        address: wallet.address,
        encrypted: wallet.encrypted
      }]
    };

    return JSON.stringify(keystore);
  };

  const content = route.params.kind === 'keystore' ? generateKeystore() : wallet.seed;

  React.useLayoutEffect(() => {
    const title = route.params.kind === 'keystore' ? 'My.security.exportKeystore' : 'My.security.exportPrivateKey';
    navigation.setOptions({ title: locale?._(title) });
  }, [navigation, route]);

  const onCopy = () => {
    Clipboard.setString(content);
    Toast.show(locale?._('copied'));

    setWallet({
      encrypted: wallet.encrypted,
      seed: wallet.seed,
      address: wallet.address,
      memo: wallet.memo,
      exported: true,
    });
  };

  return (
    <View style={{
      margin: 26,
      alignItems: 'center',
      flex: 1,
    }}>
      <View style={{
        backgroundColor: '#F8F9FCFF',
        borderColor: '#EEEEEEFF',
        borderRadius: 12,
        padding: 20,
        minHeight: 180
      }}>
        <Text>{content}</Text>
      </View>
      <View style={{ marginTop: 80 }}>
        <Button
          title={locale?._('copy')}
          onPress={onCopy}
          buttonStyle={{ backgroundColor: '#7460E3FF' }}
        />
      </View>
    </View>
  );
};

export default Export;
